<template>
  <div class="app-container">
    <el-form :model="queryParams" :rules="rules" ref="queryRef" :inline="true" label-width="120px">
      <el-form-item label="日期" prop="eventBeginTime">
        <el-date-picker
            v-model="queryParams.eventBeginTime"
            type="date"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="状态" clearable style="width: 200px">
            <el-option label="待审核" value="0"></el-option>
            <el-option label="在岗" value="1"></el-option>
            <el-option label="离岗" value="2"></el-option>
<!--            <el-option label="无事件" value="3"></el-option>-->
          </el-select>

      </el-form-item>
      <div v-if="showSearch">
        <el-form-item label="事件编号" prop="eventCode">
          <el-input
              v-model="queryParams.eventCode"
              placeholder="请输入事件编号"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceNumber">
          <el-input
              v-model="queryParams.deviceNumber"
              placeholder="请输入设备编号"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="辖区" prop="areaName">
          <el-input
              v-model="queryParams.areaName"
              placeholder="请输入区辖区"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
              v-model="queryParams.address"
              placeholder="请输入地址"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="社区" prop="community">
          <el-input
              v-model="queryParams.community"
              placeholder="请输入社区"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="小区名称" prop="residentialName">
          <el-input
              v-model="queryParams.residentialName"
              placeholder="请输入小区名称"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备品牌" prop="deviceBrand">
          <el-input
              v-model="queryParams.deviceBrand"
              placeholder="请输入设备品牌"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备型号" prop="deviceModel">
          <el-input
              v-model="queryParams.deviceModel"
              placeholder="请输入设备型号"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>

          <el-form-item label="事件" v-if="hasImgItem" prop="hasImg">
            <el-select v-model="queryParams.hasImg" placeholder="事件" clearable style="width: 200px">
              <el-option label="无事件" value="0"></el-option>
              <el-option label="有事件" value="1"></el-option>
            </el-select>

          </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['wvp:supervisor:export']"
        >导出
        </el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">

      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table ref="tableRef" :height="tableHeight" v-loading="loading" :data="surveillanceEventList"
              @selection-change="handleSelectionChange">
      <el-table-column min-width="120px" type="selection" width="55" align="center" fixed="left"/>
      <el-table-column min-width="120px" label="事件编号" align="center" prop="eventCode"  fixed="left"/>
      <el-table-column min-width="120px" label="设备编号" align="center" prop="deviceNumber"  fixed="left"/>
      <el-table-column min-width="120px" label="辖区" align="center" prop="areaName"/>
      <el-table-column min-width="120px" label="街道" align="center" prop="streetName"/>
      <el-table-column min-width="120px" label="社区" align="center" prop="community"/>
      <el-table-column min-width="120px" label="小区" align="center" prop="residentialName"/>
      <el-table-column min-width="220px" show-overflow-tooltip label="投放点名称" align="center" prop="deviceName"/>
      <el-table-column min-width="120px" label="事件图片" align="center" prop="picUrl">
        <template #default="scope">
          <el-image v-if="scope.row.picUrl" style="width: 100px; height: 100px" :src="scope.row.picUrl" @click="showPreview(scope.row)"
                    fit="contain" :z-index="99999" :preview-teleported="true"/>

        </template>
      </el-table-column>
      <el-table-column min-width="120px" label="报警时间" align="center" prop="eventTime" width="180">
      </el-table-column>
      <el-table-column min-width="120px" label="状态" align="center" prop="status">
        <template #default="scope">
          <span v-if="scope.row.status === 1">在岗</span>
          <span v-else-if="scope.row.status === 2">离岗</span>
          <span v-else-if="scope.row.status === 3">无事件</span>
          <span v-else>待审核</span>
        </template>
      </el-table-column>
      <el-table-column min-width="160px" label="操作" fixed="right">
        <template #default="scope">
          <el-button
              type="success"
              plain
              v-if="scope.row.status !== 1"
              @click="handlePass(scope.row)"
              v-hasPermi="['wvp:supervisor:success']"
          >在岗</el-button>
          <el-button
              type="danger"
              plain
              v-if="scope.row.status === 0"
              @click="handleRefuse(scope.row)"
              v-hasPermi="['wvp:supervisor:leaveDuty']"
          >离岗</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"

    />

    <plugin-form ref="pluginFormRef" @close="close"></plugin-form>


    <pic-image  ref="preveiwImgRef" showBox="0" >
                </pic-image>

  </div>
</template>

<script setup name="SurveillanceSupervisor">
import PicImage from '@/components/PicImage/ImgPreview.vue'
import PluginForm from './components/Form.vue'
import {listSurveillanceSupervisor,leaveDuty,onDuty} from "@/api/wvp/surveillanceSupervisor";
// import {getEventList} from "@/api/wvp/surveillance";
import {useRoute} from "vue-router"
import useUserStore from "@/store/modules/user";

const props = defineProps({
  surveillanceId: {
    type: Number
  }
})



const {proxy} = getCurrentInstance();

const surveillanceEventList = ref([]);

const loading = ref(true);
const showSearch = ref(false);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const preveiwInfo = ref({
  picUrl:"",
  imgLocation:"",
  imgWidth:5,
  imageHeight:5
})
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status: null,
    eventCode: null,
    eventDurationTime: null,
    eventBeginTime: null,
    eventEndTime: null,
    picUrl: null,
    localPicUrl: null,
    imgWidth: null,
    imageHeight: null,
    eventType: null,
    imgLocation: null,
    surveillanceId: null,
    hasImg: null
  },
});
const {queryParams} = toRefs(data);
const rules = ref({
  eventBeginTime:[
    { required: true, trigger: "blur", message: "请选择日期" },
  ]
})


/** 查询ai摄像头事件列表 */
function getList() {
  loading.value = true;
  if (props.surveillanceId) {
    queryParams.value.surveillanceId = props.surveillanceId;
  }

  listSurveillanceSupervisor(queryParams.value).then(response => {
    surveillanceEventList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}


/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  proxy.$refs.queryRef.validate(valid => {
    if (valid) {
      getList();
    }
  });
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.eventBeginTime = getYesterday()
  handleQuery();

}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}


/** 新增按钮操作 */
function handleAdd() {

  pluginFormRef.value.begin(false);
}


/** 修改按钮操作 */
function handleUpdate(row) {
  const _id = row.id || ids.value
  pluginFormRef.value.begin(_id)
}

// 关闭刷新页面
function close(reset = false) {
  if (reset) {
    resetQuery()
  } else {
    getList()
  }
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;

  var item = (surveillanceEventList.value).find(item => item.id === _ids[0]);
  let eventCode=item.eventCode
  proxy.$modal.confirm('是否确认删除事件编号为"' + eventCode + '"的数据项？').then(function () {
    return delSurveillanceEvent(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}

function handlePass(row){
  proxy.$modal.confirm('是否确认事件编号为"' + row.eventCode + '"的数据项督导员在岗？').then(function () {
    return onDuty(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("操作成功");
  }).catch(() => {
  });
}
function handleRefuse(row){
  proxy.$modal.confirm('是否确认事件编号为"' + row.eventCode + '"的数据项督导员离岗？').then(function () {
    return leaveDuty(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("操作成功");
  }).catch(() => {
  });
}


/** 导出按钮操作 */
function handleExport() {
  proxy.download('wvp/supervisor/export', {
    ...queryParams.value
  }, `supervisor_${new Date().getTime()}.xlsx`)
}

function  getYesterday(){
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1)
  let m = yesterday.getMonth() + 1;
  let d = yesterday.getDate();
  m = m < 10 ? '0' + m : m;
  d = d < 10 ? '0' + d : d;

  let y = yesterday.getFullYear();
  return  y + "-" + m+'-'+d;
}

const hasImgItem=ref(false);
onMounted(() => {

  const permissions = useUserStore().permissions
  const all_permission = "*:*:*";
  debugger
  hasImgItem.value= permissions.some(permission => {
    return  all_permission === permission || ['wvp:supervisor:hasImg'].includes(permission);
  })
  queryParams.value.eventBeginTime = getYesterday()

  handleResize()
  getList();
})
onActivated(()=>{
  nextTick(()=>{
    handleResize();
  })
})

const screenHeight = ref(window.innerHeight);
const tableHeight = ref(10);
const tableRef = ref();

function handleResize() {
  screenHeight.value = window.innerHeight;
  tableHeight.value = screenHeight.value - tableRef.value.$el.getBoundingClientRect().top - 80;
  console.log(tableHeight.value);

}

onMounted(() => {
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});




const preveiwImgRef =ref(null)
const showPreview=(row)=>{
  preveiwImgRef.value.show(row);
}






</script>
<style  lang="scss">
>>>.pagination-container .el-pagination {
  right: 40px !important;

}

>>>.pagination-container {
  margin-top: 0!important;
}
.pagination-container{
  margin-top: 0!important;
}
</style>
